<template>
	<div>
		<el-row class="grid-content bg-purple-dark" >
		  <el-col :span="1">
			   <span class="el-icon-search" style="margin-top: 15px;"></span>
		  </el-col>
		  <el-col :span="2" style="margin-top: 10px;">
			  筛选查询
		  </el-col>
		  <el-col :span="10"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="2" style="margin-top: 10px;">
		  </el-col>
		  <el-col :span="5" style="margin-top: 5px;margin-bottom: 5px;">
			  <el-input v-model="projectinfo" placeholder="请输入项目编号、项目名称查询" size="medium" :clearable=true @clear="findall()"></el-input>
		  </el-col>
		  <el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;">
			  <el-button type="info" size="medium" @click="findproject()">查询</el-button>
		  </el-col>
		  <el-col :span="2" style="margin-top: 5px;margin-bottom: 5px;">
		  	  <el-button type="info" size="medium" @click="addproject()">新增</el-button>
		  </el-col>
		</el-row>

		<el-dialog title="新增项目" :visible.sync="addnewproject" width="30%">
		  <el-form :model="newproject" :rules="addnewpro">
		    <el-form-item label="项目名称：" prop="projectname">
				<el-col :span="18">
					<el-input v-model="newproject.projectname" autocomplete="off"></el-input>
				</el-col>
		    </el-form-item>
        <el-form-item label="我的角色" prop="projectRoleId" style="width: 262px;">
          <el-select v-model="newproject.projectRoleId" placeholder="请选择状态" style="width: 120px;">
            <el-option v-for="projectRole in projectRoles" :key="projectRole.projectRoleId"
              :label="projectRole.projectRoleName" :value="projectRole.projectRoleId">
            </el-option>
          </el-select>
        </el-form-item>
		    <el-form-item label="项目简介：" prop="projectdescribe">
				<el-col :span="18">
					<el-input type="textarea" :rows="4" v-model="newproject.projectdescribe"></el-input>
				</el-col>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savenewproject()">保 存</el-button>
		  </div>
		</el-dialog>

		<el-dialog title="修改项目" :visible.sync="changedproject" width="30%">
		  <el-form :model="changedprojects" :rules="changepro">
		    <el-form-item label="项目名称：" prop="projectname">
				<el-col :span="18">
					<el-input v-model="changedprojects.projectname" autocomplete="off"></el-input>
				</el-col>
		    </el-form-item>
		    <el-form-item label="项目简介：" prop="projectdescribe">
				<el-col :span="18">
					<el-input type="textarea" :rows="4" v-model="changedprojects.projectdescribe"></el-input>
				</el-col>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="savechangeproject()">保 存</el-button>
		  </div>
		</el-dialog>

		<el-dialog
		  title="关闭"
		  :visible.sync="colseproject"
		  width="30%">
		  <span>项目关闭成功</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="sureclose()">确 定</el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="开启"
		  :visible.sync="openproject"
		  width="30%">
		  <span>项目开启成功</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="sureopen()">确 定</el-button>
		  </span>
		</el-dialog>

		<el-table
		    ref="multipleTable"
		    :data="projectes.reconds"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55"
			  align="center">
		    </el-table-column>
		    <el-table-column
		      prop="projectId"
		      label="编号"
		      width="120"
			  align="center">
		    </el-table-column>
			<el-table-column
			  prop="projectName"
			  label="项目名称"
			  width="120"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="projectDescription"
			  label="项目简介"
			  width="300"
			  align="center">
			</el-table-column>
			<el-table-column
			  prop="projectState"
			  label="状态"
			  width="120"
			  align="center">
			</el-table-column>
			<el-table-column
			      fixed="right"
			      label="操作"
				  align="center"
				  show-overflow-tooltip>
			      <template slot-scope="scope">
			        <el-button type="text" size="small" @click="managerUser(scope.row)">成员管理</el-button>
			        <el-button type="text" size="small" @click="changeproject(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="changestate(scope.row)" v-if="scope.row.projectState == '有效'">关闭</el-button>
					<el-button type="text" size="small" @click="changestate(scope.row)" v-else>开启</el-button>
			      </template>
			</el-table-column>
		  </el-table>

		<el-pagination
		   @size-change="handleSizeChange"
		   @current-change="handleCurrentChange"
		   :current-page="projectes.pagenum"
		   :page-sizes="[1, 2, 3, 4]"
		   :page-size="projectes.pagesize"
		   layout="total, sizes, prev, pager, next, jumper"
		   :total="projectes.totals"
			v-if=" this.projectinfo == '' ">
		</el-pagination>

	</div>
</template>

<script>
	export default{
		name:'Projectmanager',
		data(){
			return{
				projectinfo:'',
				projectes:{
					pagenum: 0,
					pagesize: 0,
					reconds: [],
					totals: 0
				},
				addnewproject:false,
				newproject:{
					projectname:'',
					projectdescribe:'',
          projectRoleId:'',
				},
				changedproject:false,
				changedprojects:{
					projectname:'',
					projectdescribe:''
				},
        projectRoles:[],
				user:{},
			    multipleSelection: [],
				project:{},
				colseproject:false,
				openproject:false,
				addnewpro:{
					projectname:[
						{ required: true, message: '请输入项目名称', trigger: 'blur' }
					],
					projectdescribe:[
						{ required: true, message: '请输入项目简介', trigger: 'blur' }
					]
				},
				changepro:{
					projectname:[
						{ required: true, message: '请输入项目名称', trigger: 'blur' }
					],
					projectdescribe:[
						{ required: true, message: '请输入项目简介', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			handleSizeChange(val) {
			  console.log(`每页 ${val} 条`);
			  let s = ''
			  this.findprojectes(s,this.projectes.pagenum, val)
			},
			handleCurrentChange(val) {
			  console.log(`当前页: ${val}`);
			  let s = ''
			  this.findprojectes(s,val, this.projectes.pagesize)
			},
			 handleSelectionChange(val) {
				console.log(val)
			    this.multipleSelection = val;
			 },
			 addproject(){
				 this.addnewproject=true
			 },
			 savenewproject(){
				 if(this.newproject.projectname != '' && this.newproject.projectdescribe){
					 let newprojectform = {
					 	projectname:this.newproject.projectname,
					 	projectdescribe:this.newproject.projectdescribe,
					 	uid:this.user.uid,
					 	uname:this.user.uname,
            projectRoleId:this.newproject.projectRoleId
					 }
					 this.$axios.post("project/addnew",newprojectform).then(resp=>{
					 		if(200 == resp.data.code){
					 			alert("新增成功")
					 			this.addnewproject=false
					 			this.newproject.projectname=''
					 			this.newproject.projectdescribe=''
					 			let s = ''
					 			this.findprojectes(s,this.projectes.pagenum,this.projectes.pagesize)
					 		}else{
					 			alert(resp.data.message)
					 		}
					 })
				 }
			 },
			 changeproject(ss){
				 this.project=ss
				 this.changedprojects.projectname = ss.projectName
				 this.changedprojects.projectdescribe = ss.projectDescription
				 this.changedproject=true
			 },
			 savechangeproject(){
				if(this.changedprojects.projectname != '' && this.changedprojects.projectdescribe != ''){
					let newprojectform = {
						projectname:this.changedprojects.projectname,
						projectdescribe:this.changedprojects.projectdescribe,
						uid:this.user.uid,
						uname:this.user.uname,
						projectid:this.project.projectId
					}
					console.log(newprojectform)
					this.$axios.post("project/changeproject",newprojectform).then(resp=>{
						if(200 == resp.data.code){
							alert("修改成功")
							this.changedproject=false
							this.changedprojects.projectname=''
							this.changedprojects.projectdescribe=''
							let s = ''
							this.findprojectes(s,this.projectes.pagenum,this.projectes.pagesize)
						}else{
							alert("修改失败，请稍后尝试")
						}
					})
				}
			 },
			 changestate(s){
				 this.project=s
				 let ss = {
					 projectid:s.projectId,
					 projectState:s.projectState
				 }
				 this.$axios.post("project/changestate",ss).then(resp=>{
					 if(resp.data.code == 200 && s.projectState == "有效"){
						 this.colseproject=true
					 }else if(resp.data.code == 200 && s.projectState == "关闭"){
						 this.openproject=true
					 }else{
						 alert("当前操作失败，请稍后重试")
					 }
				 })
			 },
			 sureclose(){
				this.colseproject=false
				 let s = ''
				 this.findprojectes(s,this.projectes.pagenum,this.projectes.pagesize)
			 },
			 sureopen(){
				 this.openproject=false
				  let s = ''
				  this.findprojectes(s,this.projectes.pagenum,this.projectes.pagesize)
			 },
			 findprojectes(s,num,size){
				 console.log(s)
				 if(num > 0 && size > 0){
					 let cond = {
						condition:s,
						uid:this.user.uid,
						pagenum:num,
						pagesize:size
					 }
					this.$axios.post("project/getprojects",cond).then(resp=>{
						if(200 == resp.data.code){
							this.projectes.pagenum = resp.data.data.current
							this.projectes.pagesize = resp.data.data.size
							this.projectes.totals = resp.data.data.total
							this.projectes.reconds = resp.data.data.records
						}else{
							alert("查询失败，未找到该项目")
						}
					})
				 }
			 },
			 findproject(){
				 if(this.projectinfo != ''){
					this.findprojectes(this.projectinfo,this.projectes.pagenum,this.projectes.pagesize)
				 }else{
					alert("请输入查询条件")
				 }
			 },
			 managerUser(s){
         this.$router.push("/main/UserRolemanager")
         sessionStorage.setItem("nowproject",window.JSON.stringify(s.projectId))

			 },
			 findall(){
				 let s = ''
				 this.findprojectes(s,this.projectes.pagenum,this.projectes.pagesize)
			 },
       getManagerRole(){
         this.$axios.post("/projectRole/getManagerRole").then(resp=>{
           console.log(resp)
           this.projectRoles=resp.data.data
         })
       }
		},
		created() {
			this.user = JSON.parse(sessionStorage.getItem("user"))
			let s = ''
			this.findprojectes(s,1,2)
      this.getManagerRole()
		}
	}
</script>

<style>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99aabf85;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
</style>
